<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node</title>
</head>
<body>

<div id="container">
    <ul>
        <li>大一</li>
        <li>大二</li>
        <li>大三</li>
        <li>大四</li>
    </ul>
</div>

<script type="text/javascript">
    // 通过 document 中的方法，获取 指定的元素

    // 根据 id 获取元素
    let div = document.getElementById("container") ;
    console.log( div ) ;

    // 获取 所有的子节点，返回的类型是 NodeList ，一个类数组对象（就是一个长得像数组的对象）
    let childNodes = div.childNodes ;
    console.log( childNodes ) ;

    // 返回 NamedNodeMap 的数据，有点类似于Java中的Map，也是键值对的形式
    console.log( div.attributes ) ;

    let attributes = div.attributes ;
    // 通过循环进行遍历,得到attribute里面的键值数据
    for (let i = 0; i < attributes.length; i++) {
        console.log( attributes[i].name  ) ;
        console.log( attributes[i].value  ) ;
        console.log( attributes[i].nodeType ) ; // 2
    }

</script>


</body>
</html>